替换不工作？使用Javascript / jQuery的

Question

I guess I'm too dumb for this. Why my code only replace the first instance of each word? I want to highlight all words with those names

 //highlight words in the results $("#results").html(function() { return $(this).html() .replace("OK", '<span class="label label-success p-3">OK</span>') .replace("ERROR:", '<span class="label label-danger p-3">ERROR:</span>') .replace("FAIL:", '<span class="label label-warning p-3">FAIL:</span>') .replace("AssertionError:", '<span class="label label-warning p-3">AssertionError:</span>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <span id="results" style="white-space: pre-line">Running test: fasf . ---------------------------------------------------------------------- Ran 1 test in 0.652s OK FAIL: ERROR: Running test: test1 . ---------------------------------------------------------------------- Ran 1 test in 15.457s OK FAIL: ERROR: </span> 

Answer 1

You'll have to use a regular expression with the 'g' flag if you want to replace all.

See this little snippet:

 const theString = 'foo'; console.log(theString.replace('o', 'i')) console.log(theString.replace(/o/g, 'i')) 

see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

Answer 2

Use Regex, "OK" to /OK/g with global flag.

 //highlight words in the results $("#results").html(function() { return $(this).html() .replace(/OK/g, '<span class="label label-success p-3">OK</span>') .replace(/ERROR/g, '<span class="label label-danger p-3">ERROR:</span>') .replace(/FAIL/g, '<span class="label label-warning p-3">FAIL:</span>') .replace(/AssertionError/g, '<span class="label label-warning p-3">AssertionError:</span>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <span id="results" style="white-space: pre-line">Running test: fasf . ---------------------------------------------------------------------- Ran 1 test in 0.652s OK FAIL: ERROR: Running test: test1 . ---------------------------------------------------------------------- Ran 1 test in 15.457s OK FAIL: ERROR: </span>