如何删除特定文本短语的所有实例
How can I remove all instances of a specific text-phrase?
在网页的正文区域是唯一可访问的部分的情况下,是否有方法使用内联JavaScript或其他内联语言删除特定文本短语(用HTML编写)的所有实例?
这在很多情况下都很有用,比如人们使用Tiny.cc/customurl,并希望删除表示"微小.cc/"的部分
如果允许具体细节,我们将使用Tiny.cc修改一个日历插件,以创建一个自定义URL(微小.cc/customurl)。该插件默认显示完整的URL,因此我们希望去掉文本"微小.cc/",并在代码中保留"customurl"部分:
<div class="ews_cal_grid_custom_item_3">
<div class="ews_cal_grid_select_checkbox_clear" id="wGridTagChk" onclick="__doPostBack('wGridTagChk', 'tiny.cc/Baseball-JV');" > </div>
tiny.cc/Baseball-JV
</div>
我们要删除的部分是第3行的http://tiny.cc/
本身。
要做到这一点而不替换所有HTML(这会破坏所有事件处理程序),也不需要递归(通常更快),可以这样做:
function removeText(top, txt) {
var node = top.firstChild, index;
while(node && node != top) {
// if text node, check for our text
if (node.nodeType == 3) {
// without using regular expressions (to avoid escaping regex chars),
// replace all copies of this text in this text node
while ((index = node.nodeValue.indexOf(txt)) != -1) {
node.nodeValue = node.nodeValue.substr(0, index) + node.nodeValue.substr(index + txt.length);
}
}
if (node.firstChild) {
// if it has a child node, traverse down into children
node = node.firstChild;
} else if (node.nextSibling) {
// if it has a sibling, go to the next sibling
node = node.nextSibling;
} else {
// go up the parent chain until we find a parent that has a nextSibling
// so we can keep going
while ((node = node.parentNode) != top) {
if (node.nextSibling) {
node = node.nextSibling;
break;
}
}
}
}
}
在此处进行演示:http://jsfiddle.net/jfriend00/2y9eH/
要对整个文档执行此操作,您只需调用:
removeText(document.body, "http://tiny.cc/Baseball-JV");
只要您可以以字符串格式提供数据,就可以使用正则表达式为您提供数据。
您可以解析body标记的整个innerHTML,如果这是您可以访问的全部内容的话。这是一种缓慢且有点糟糕的练习方法,但为了解释起见:
document.body.innerHTML = document.body.innerHTML.replace(
/http:'/'/tiny'.cc'//i, // The regular expression to search for
""); // Waht to replace with (nothing).
整个表达式包含在正斜杠中,因此regexp中的任何正斜杠都需要用反斜杠转义。
这适用于regexp中具有特殊含义的其他字符,例如句点。单个句点(.
)表示匹配的"任意"字符。要匹配周期,必须对其进行转义('.
)
编辑:
如果你想在onclick中保留对URL的引用,你可以修改regexp,使其在单引号内不匹配(例如你的例子):
/([^']http:'/'/tiny'.cc'/[^'])/i
如果你不想替换HTML中该字符串的所有实例,那么你必须递归地迭代节点结构,例如:
function textFilter(element, search, replacement) {
for (var i = 0; i < element.childNodes.length; i++) {
var child = element.childNodes[i];
var nodeType = child.nodeType;
if (nodeType == 1) { // element
textFilter(child, search, replacement);
} else if (nodeType == 3) { // text node
child.nodeValue = child.nodeValue.replace(search, replacement);
}
}
}
然后,您只需抓住适当的元素,并在其上调用此函数:
var el = document.getElementById('target');
textFilter(el, /http:'/'/tiny.cc'//g, ""); // You could use a regex
textFilter(el, "Baseball", "Basketball"); // or just a simple string
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- onkeyup无法动态创建多个文本区域
- 如何在下面的ES6循环中获得前面的文本
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 借助asp.net验证或java脚本对多个文本进行验证
- 无法在ajaxStart中更改跨度文本
- 高亮显示时编辑文本大小和颜色
- jquery中的文本框验证
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- 如何删除特定文本短语的所有实例
- 突出显示文本正文中的短语部分
- Javascript在文本中创建一个包含重复短语的数组
- 从文本中提取关键短语(1-4个单词)
- (JQuery)在文本框中使用单词或短语触发动作
- 如何在javascript中创建文本框和最长单词按钮来查找html中短语中最长的单词