Question

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

var array1 = [value1，value2，value3]

如果我在html字符串中找到value1，我想在该值中添加一个高亮类，以便突出显示。

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

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

Answer 1

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

＆＃13;

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

＆＃13;

陷阱

请记住，element.querySelectorAll（）和element.classList.add（）不受普遍支持。查看caniuse.com以获取有关每项功能的信息。

此外，这完全取决于浏览器如何解析您的HTML。如果HTML无法解析或解析不正确，您将遇到问题。 .innerHTML属性也不保证原始字符串中提供的空格将保留在结果中。

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

1 个答案:

陷阱