js判断字符串中是否包含某个字符串 ,并将这些被包含的字符串添加到标签中绑定点击事件兼容所有浏览器示例
时间: 2023-10-28 15:25:38 浏览: 102
js判断数组是否包含某个字符串变量的实例
你可以使用JavaScript的`indexOf`方法来判断字符串中是否包含某个子字符串。以下是一个示例代码,它将在找到匹配的子字符串时将其添加到一个标签中,并绑定点击事件以兼容所有浏览器:
```javascript
// 获取包含要搜索的字符串的父元素
var parentElement = document.getElementById("parentElement");
// 要搜索的字符串
var searchString = "要搜索的字符串";
// 所有文本节点的集合
var textNodes = [];
// 递归遍历元素的所有子节点,找到文本节点
function findTextNodes(element) {
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i];
if (node.nodeType === Node.TEXT_NODE) {
textNodes.push(node);
} else {
findTextNodes(node);
}
}
}
// 在文本节点中搜索匹配的子字符串
function searchAndHighlight() {
for (var i = 0; i < textNodes.length; i++) {
var node = textNodes[i];
var text = node.textContent;
var index = text.indexOf(searchString);
if (index !== -1) {
var before = text.substring(0, index);
var after = text.substring(index + searchString.length);
// 创建包含匹配子字符串的span元素
var span = document.createElement("span");
span.textContent = searchString;
// 创建包含之前和之后文本的文本节点
var beforeNode = document.createTextNode(before); var afterNode = document.createTextNode(after);
// 替换原来的文本节点
node.parentNode.replaceChild(afterNode, node);
// 插入新的节点
node.parentNode.insertBefore(afterNode, span);
node.parentNode.insertBefore(span, afterNode);
// 绑定点击事件
span.addEventListener("click", function() {
alert("你点击了匹配的字符串:" + this.textContent);
});
}
}
}
// 开始搜索并高亮匹配的字符串
findTextNodes(parentElement);
searchAndHighlight();
```
在上面的代码中,你需要将`"要搜索的字符串"`更改为你想要搜索和高亮显示的子字符串,并将`"parentElement"`更改为你包含这些文本的父元素的ID。这样,代码将遍历父元素中的所有文本节点,搜索匹配的子字符串,并将其添加到一个带有点击事件的`<span>`元素中。
希望这能满足你的需要!如果有任何疑问,请随时提问。
阅读全文