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

Question

我可以访问要在其中搜索一组特定值的html字符串。 所以可以说我想匹配数组中的某项...

var array1 = [value1，value2，value3]

如果我在html字符串中找到value1，我想向该值添加突出显示类，以使其突出显示。

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

使用这个我可以突出显示所有theads，但是我怎么写它以便只突出显示其中包含那些数组值之一的thead？

Answer 1

这是一种用于浏览器的解决方案，该解决方案将HTML字符串解析为DOM元素，查询DOM树并操纵每个选定元素的classList ，然后将HTML作为字符串返回。

 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); 

陷阱

请记住，不普遍支​​持element.querySelectorAll（）和element.classList.add（）。 请访问caniuse.com，以获取有关每个功能的信息。

另外，这完全取决于浏览器如何解析HTML。 如果HTML解析失败或解析错误，您将遇到问题。 .innerHTML属性也不保证原始字符串中提供的空白将保留在结果中。