瀏覽器誤讀Document.write（）

我老實說不太清楚，如果我正確地標題這個問題，因爲我不能確定問題。另外，請記住，我仍然有很多需要了解進化算法的知識，並且不是以任何方式掌握它們的。瀏覽器誤讀Document.write（）

下面的代碼是一個簡單的遺傳算法，如果你甚至想這麼稱呼它的話。它遺漏了真正的完整遺傳算法的多個特徵，但它僅僅是示範的一個例子。它所做的只是一個字符串（在這種情況下由我預先確定）並對它進行變異，一次一個字符，直到字符串變成「Hello，world！」。看看：

var source2 = "og834tnUEF*bt"; //random string 
var target2 = "Hello, world!"; 

function fitness(source, target) { 
    var fitval = 0; 
    for(var i = 0; i < source.length; i++) { 
     fitval += Math.pow(target.charCodeAt(i) - source.charCodeAt(i), 2); 
    } return (fitval); 
} 

function mutate(source) { 
    var charpos = Math.floor(Math.random() * source.length); 
    parts = source.split(""); 
    var temp = String.fromCharCode(source.charCodeAt(charpos) + (Math.random() < 0.5 ? -1 : 1)); 
    parts[charpos] = temp; 
    return (parts.join("")); 
} 

//functions end 

var fitval = fitness(source2, target2); 
var p = 0; 
while(true) { 
    p += 1; 
    mutant = mutate(source2); 
    mutFit = fitness(mutant, target2); 
    if (mutFit < fitval) { 
     fitval = mutFit; 
     source2 = mutant; 
     document.write(p + " : " + mutFit + " : " + mutant + "<br />"); 
    } if (fitval === 0) break; 
}

我不相信算法的描述很重要，因爲我沒有問題的代碼。這行在這裏：

document.write(p + " : " + mutFit + " : " + mutant + "<br />");

似乎是給我的問題。儘管最後包含一個換行符，但瀏覽器中的輸出無時無刻都會偶爾分組。看看這裏的JSFiddle：https://jsfiddle.net/oaahzsuf/

注意輸出綁定？我發現分組似乎每次出現分號都會發生變化，但我不知道與什麼有關。關於什麼是問題的任何想法？我覺得我可以忽略簡單的東西，所以任何幫助表示讚賞。

來源

2015-04-30 SiteChunk

如果console.log每次要追加到輸出DIV字符串，然後你會發現，他們中的一些破壞你的<br>標籤，因爲它們含有HTML字符，如<和innerHTML試圖解析字符串轉換成HTML（我檢查了jsFiddle，你使用的是innerHTML）。同樣的問題發生在document.write。

最簡單的解決方案是在第二個concat操作上附加<br>標記。

像這樣：

https://jsfiddle.net/oaahzsuf/1/

output.innerHTML += (p + " : " + mutFit + " : " + mutant); 
output.innerHTML += '<br />';

如果有一個機會，你的字符串都不會包含完整的標籤<>，那麼你可以這樣做：

output.innerText += (p + " : " + mutFit + " : " + mutant); 
output.innerHTML += '<br />';

innerText威脅stri ng作爲純文本。

第三個選擇是使用<pre>標籤在你的字符串：

https://jsfiddle.net/oaahzsuf/4/

output.innerHTML += (p + " : " + mutFit + " : <pre>" + mutant + "</pre><br />");

和第四選項逃避串像@Joe指出。

此外，呼籲document.getElementById多次循環可能不是最好的事情。只需在循環之外保存對你的output div的引用即可。

來源

2015-04-30 05:53:08

你的隨機字符發生器正在輸出一個<字符！

也許讓你的角色生成器的行爲只允許它創建實際上會在你的輸出中的有效字符。

如果你真的想要這些字符，無論如何，然後escape the html entities像這樣：

function htmlEscape(str) { 
    return String(str) 
      .replace(/&/g, '&amp;') 
      .replace(/"/g, '&quot;') 
      .replace(/'/g, '&#39;') 
      .replace(/</g, '&lt;') 
      .replace(/>/g, '&gt;'); 
} 

... 

document.write(p + " : " + htmlEscape(mutFit) + " : " + htmlEscape(mutant) + "<br />");

此外，不要使用document.write。

如果您執行頁面after the page has full loaded，則可以將輸出附加到<body>元素。

document.addEventListener("DOMContentLoaded", function(event) { 
    var documentBody = document.getElementsByTagName('body')[0]; 
    //do work 
    documentBody.innerHTML += p + " : " + mutFit + " : " + mutant + "<br />"; 
});

來源

2015-04-30 05:50:24

瀏覽器誤讀Document.write（）

回答

相關問題