javascript - 不可知的方式来匹配和包装 body 中的所有字符串(无需知道 html 结构)-6ren

javascript - 不可知的方式来匹配和包装 body 中的所有字符串(无需知道 html 结构)

转载作者：可可西里更新时间：2023-11-01 15:01:38

25

4

我有一个文件 strings.json 其中包含

{
  "fname": "First Name",
  "lname": "Last Name",
  "email": "Email"
}

我有另一个文件 index.html 其中包含

  First name <input type="text" name="fname">
  Last name 
  Email

如果 html 文件包含 json 文件中存在的字符串，我想使用 span 和数据属性将其包装起来，使用 Javascript 或 JQuery，例如:

 <span data-string="fname">First name</span><input type="text" name="fname">
 <span data-string="lname">Last name</span>
 <span data-string="email">Email</span>

我不想要这样的解决方案question ，我的问题很相似，但主要区别在于我想要一个不可知的代码，它可以在不知道 html 结构的情况下工作，而且我也不想要特定于一种结构的正则表达式。

你只需在 body 中给它字符串，它将所有结果包装在一个如上所示的范围内，仅此而已。我还没有找到不可知论的方法。另一个例子是这个 question ，也不是不可知论者，你必须知道它的 html 结构才能工作。

Markjs 不工作有两个原因:

我想用它来选择字符串，它会突出显示它们，但我不知道如何关闭突出显示

更重要的是:

var myString = $("body").mark("Hi");
console.log(myString);
// returns

translate.html:17 r.fn.init(1)0: bodyaLink: ""accessKey: ""assignedSlot: nullattributes: NamedNodeMap {length: 0}background: ""baseURI: "file:///home/elie/Desktop/csc/translate.html"bgColor: ""childElementCount: 7childNodes: (14) [text, h1, br, text, mark, text, script, text, script, text, script, text, script, text]children: (7) [h1, br, mark, script, script, script, script]classList: [value: ""]className: ""clientHeight: 88clientLeft: 0clientTop: 0clientWidth: 1264contentEditable: "inherit"dataset: DOMStringMap {}dir: ""draggable: falsefirstChild: textfirstElementChild: h1hidden: falseid: ""innerHTML: "↵   <h1><mark data-markjs="true">Hi</mark>,</h1><br>↵   T<mark data-markjs="true">hi</mark>s is the text that will be translated↵↵↵<script src="jquery-3.2.1.min.js"></script>↵<script src="jquery.mark.min.js"></script>↵<script src="jquery.localize.min.js"></script>↵↵<script type="text/javascript">↵var myString = $("body").mark("Hi");↵console.log(myString);↵</script>↵↵"innerText: "Hi,↵↵↵This is the text that will be translated"isConnected: trueisContentEditable: falselang: ""lastChild: textlastElementChild: scriptlink: ""localName: "body"namespaceURI: "http://www.w3.org/1999/xhtml"nextElementSibling: nullnextSibling: nullnodeName: "BODY"nodeType: 1nodeValue: nullnonce: ""offsetHeight: 88offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 1264onabort: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonbeforeunload: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullongotpointercapture: nullonhashchange: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonlanguagechange: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmessage: nullonmessageerror: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonoffline: nullononline: nullonpagehide: nullonpageshow: nullonpaste: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerup: nullonpopstate: nullonprogress: nullonratechange: nullonrejectionhandled: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectstart: nullonstalled: nullonstorage: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullonunhandledrejection: nullonunload: nullonvolumechange: nullonwaiting: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwheel: nullouterHTML: "<body>↵ <h1><mark data-markjs="true">Hi</mark>,</h1><br>↵   T<mark data-markjs="true">hi</mark>s is the text that will be translated↵↵↵<script src="jquery-3.2.1.min.js"></script>↵<script src="jquery.mark.min.js"></script>↵<script src="jquery.localize.min.js"></script>↵↵<script type="text/javascript">↵var myString = $("body").mark("Hi");↵console.log(myString);↵</script>↵↵</body>"outerText: "Hi,↵↵↵This is the text that will be translated"ownerDocument: documentparentElement: htmlparentNode: htmlprefix: nullpreviousElementSibling: headpreviousSibling: textscrollHeight: 88scrollLeft: 0scrollTop: 0scrollWidth: 1264shadowRoot: nullslot: ""spellcheck: truestyle: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}tabIndex: -1tagName: "BODY"text: ""textContent: "↵  Hi,↵    This is the text that will be translated↵↵↵↵↵↵↵↵var myString = $("body").mark("Hi");↵console.log(myString);↵↵↵"title: ""translate: truevLink: ""__proto__: HTMLBodyElementlength: 1prevObject: [document]__proto__: Object(0)

我希望 console.log 返回 Hi

最佳答案

Dave Gilem 的替换器是一个好的开始，但您需要递归遍历 DOM 并将其仅应用于文本节点。此解决方案依赖于 jQuery。虽然使用 jQuery.each() 遍历 DOM 的速度要慢得多，但这是迄今为止创建新 HTML 节点来代替匹配字符串的最简单方法。

/**
  * replace text with <span> according to the wrapList
  * @param {Object} $elem jQuery DOM Object of a text node
  */
function replaceText($elem) {
    var pattern,
        textcontent  = $elem.text(),
        wrapList = {
            "fname": "First name",
            "lname": "Last name",
            "email": "Email"
            };

    for (const key in wrapList) {
        if (wrapList.hasOwnProperty(key)) {
            pattern = new RegExp(wrapList[key], 'g');
            // as we do a DOM manipulation, we only want to do it if necessary
            if (pattern.test(textcontent)) {
                // replace the text node with new text. $& in JS equals $0 in other languages
                textcontent = textcontent.replace(pattern,'<span data-string="'+key+'">$&</span>');
            }            
        }
    }
    // a change has been made
    if (textcontent != $elem.text()) {
        $elem.replaceWith(textcontent);
    }
}

/**
  * loop through DOM nodes recursively and call replaceText() on text nodes
  * @param {Object} $elem jQuery DOM Object
  */
function replaceRecursive($elem) {
    // get the nodeType of the object's DOM node
    var nt = $elem.get(0).nodeType;
    if (nt === 3) {
        // type 3 is a text node: replace the text
        replaceText($elem);
    } else if(nt === 1) {
        // type 1 is a DOM element: loop through the child objects recursively
        $elem.contents().each(function () {
            replaceRecursive($(this));
        });
    }
}

// start with the <body> tag
replaceRecursive($('body'));

jsfiddle

编辑:有一个错误:在 for 循环中使用 replaceWith() 总是会更新内容。如果节点中多次出现搜索词，它只会替换最后一个。

关于javascript - 不可知的方式来匹配和包装 body 中的所有字符串(无需知道 html 结构)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47519336/

25

4

0

文章推荐： java - 简单示例 : HBase + Spring

文章推荐： java - mapreduce，排序值

文章推荐： java - Hadoop 查找任务尝试的主机名

awk - 如果行与“foo”匹配，线上方与“bar”匹配，线下方与“baz”匹配，则删除行？
使用sed和/或awk，仅在行包含字符串“ foo”并且行之前和之后的行分别包含字符串“ bar”和“ baz”时，我才希望删除行。因此，对于此输入： blah blah foo blah bar
c# - 如何按 X% 匹配 2 个字符串(即 >90% 匹配)
例如: S1: "some filename contains few words.txt" S2:“一些文件名包含几个单词 - draft.txt” S3:“一些文件名包含几个单词 - 另一个 dr
R 合并数据帧，允许不精确的 ID 匹配(例如，附加字符 1234 匹配 ab1234)
我正在尝试处理一些非常困惑的数据。我需要通过样本 ID 合并两个包含不同类型数据的大数据框。问题是一张表的样本 ID 有许多不同的格式，但大多数都包含用于匹配其 ID 中某处所需的 ID 字符串，例如
css - 匹配 col-md 时显示 div，匹配 col-sm 时不显示
我想在匹配特定屏幕尺寸时显示特定图像。在这种情况下，对于 Bootstrap ，我使用 col-xx-## 作为我的选择。但似乎它并没有真正按照我认为应该的方式工作。基本思路，我想显示一种全屏图像，
apache - mod_rewrite 问题 : RewriteCond %{REQUEST_FILENAME} ! -f 匹配，即使 REQUEST_FILENAME 不应(完全)匹配
出于某种原因，这条规则 RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*
F# 匹配 ->
我想做类似的东西(Nemerle 语法) def something = match(STT) | 1 with st= "Summ" | 2 with st= "AVG" =>
JavaScript 匹配
假设这是我的代码 var str="abc=1234587;abc=19855284;abc=1234587;abc=19855284;abc=1234587;abc=19855284;abc=123
JavaScript 匹配
我怎样才能得到这个字符串的数字:'(31.5393701, -82.46235569999999)' 我已经在尝试了，但这离解决方案还很远:) text.match(/$(\d+),(\d+)$/
JavaScript 匹配
如何去除输出中的逗号 (,)？有没有更好的方法从字符串或句子中搜索 url。 alert(" http://www.cnn.com df".match(/https?:\/\/([-\w\.]+
Python - 匹配
a = ('one', 'two') b = ('ten', 'ten') z = [('four', 'five', 'six'), ('one', 'two', 'twenty')] 我正在尝试
vba - 循环遍历行和列时的索引/匹配
我已经编写了以下代码，我希望用它来查找从第 21 列到另一张表中最后一行的值，并根据这张表中 A 列和另一张表中 B 列中的值将它们返回到这张表床单。当我使用下面的代码时，我得到一个工作表错误。你能
Excel 匹配 IF 语句未正确评估
我在以下结构中有两列 A B 1 49 4922039670 我已经能够评估 =LEN(A1)如2 , =LEFT(B1,2)如49 , 和 =LEFT(B1,LEN(A1)
基于行首的 Vim 匹配
我有一个文件，其中一行可以以 + 开头, -或 * .在其中一些行之间可以有以字母或数字(一般文本)开头的行(也包含这些字符，但不在第 1 列中!)。知道这一点，设置匹配和突出显示机制的最简单方法是
正则表达式:匹配，但如果在评论中则不匹配
我有一个数据字段文件，其中可能包含注释，如下所示: id, data, data, data 101 a, b, c 102 d, e, f 103 g, h, i // has to do with
匹配 url 的正则表达式模式
我有以下模式:/^\/(?P.+)$/匹配:/url . 我的问题是它也匹配 /url/page ，如何忽略/在这个正则表达式中？该模式应该: 模式匹配:/url 模式不匹配:/url/page 提
r - R中多维度的聚类/匹配
我有一个非常庞大且复杂的数据集，其中包含许多对公司的观察。公司的一些观察是多余的，我需要制作一个键来将多余的观察映射到一个单独的观察。然而，判断他们是否真的代表同一家公司的唯一方法是通过各种变量的相似
xpath 匹配 - 查找值不在值集中的标签是否存在
我有以下 XML A B C 我想查找 if not(exists(//Record/subRecord
javascript - 匹配/不匹配的正则表达式上没有出现警报框？
我制作了一个正则表达式来验证潜在的比特币地址，现在当我单击报价按钮时，我希望根据正则表达式检查表单中输入的值，但它不起作用。 https://jsfiddle.net/arkqdc8a/5/ var
sql - 检查支架是否平衡/匹配
我有一些 MS Word 文档，我已将其全部内容转移到 SQL 表中。内容包含多个方括号和大括号，例如 [{a} as at [b],] {c,} {d,} etc 我需要进行检查以确保括号平衡/匹
JavaScript Unicode 匹配
我正在使用 Node.js 从 XML 文件读取数据。但是当我尝试将文件中的数据与文字进行比较时，它不匹配，即使它看起来相同: const parser: xml2js.Parser = new

首页

博学

6Ren·AI

商城

javascript - 不可知的方式来匹配和包装 body 中的所有字符串(无需知道 html 结构)