有条件地从html字符串中查找和替换html标签

Question

I have access to an html string in which I want to search for a specific set of values. So lets say I want to match something from an array...

var array1 = [value1, value2, value3]

If I find value1 in the html string, i want to add a highlight class to that value so it gets highlighted.

 var str = htmlString var res = str.replace('<thead>','<thead class="highlight">'); htmlString = res 

Using this i can highlight all the theads, but how could I write it so that I only highlight the theads that contain one of those array values inside of it?

Answer 1

Here's a solution for browser that parses the HTML string into a DOM element, query the DOM tree and manipulate the classList of each selected element, then returns the HTML as a string.

 function addClassToElementsByTagName(html, tagName, className) { var tempElement = document.createElement('div'); tempElement.innerHTML = html; var elements = tempElement.querySelectorAll(tagName); elements.forEach(function(element) { element.classList.add(className); }); return tempElement.innerHTML; } var htmlString = '<table>\\n\\t<thead>\\n\\t<tr>\\n\\t\\t<th>Column 1</th>\\n\\t\\t<th>Column 2</th>\\n\\t\\t<th>Column 3</th>\\n\\t</tr>\\n\\t</thead>\\n</table>'; var result = addClassToElementsByTagName(htmlString, 'thead', 'highlight'); console.log(result); 

Gotchas

Keep in mind that element.querySelectorAll() and element.classList.add() are not universally supported. Check out caniuse.com for information regarding each feature.

Also, this is completely dependent on how the browser parses your HTML. If the HTML fails to parse or parses incorrectly, you will experience problems. The .innerHTML property also makes no guarantee that the whitespace provided in the original string will be preserved in the result.