【问题标题】:Get tag by specified text通过指定文本获取标签
【发布时间】:2015-11-02 07:06:28
【问题描述】:

我需要一个简单的解决方案来获取包含给定文本的 DOM 标记。

例如。

<body>
   <div id='example'>Hello world!</div>
</body>

<script>
  function GetTagInfo('Hello');
 //I wan't it to return the div as the object so I'll next update the    //content with another text. 
</script>

我不想使用任何正则表达式,我需要干净简单的代码。

【问题讨论】:

  • 您想询问页面上的每个元素,而不仅仅是divs?
  • 我们为什么要在这里发布解决方案。这个问题不符合标准。 我需要简洁的代码。 == 给我代码。到 OP。欢迎来到 SO。你读过这部分内容吗?它解释了如何在 Stack Overflow 上写一个好问题?如果没有,请阅读:*.com/help/how-to-ask 和/或 *.com/help/mcve
  • 抱歉我的错误。这是我的第一篇文章。非常感谢您的来信。

标签: javascript jquery html dom jquery-selectors


【解决方案1】:

你可以使用包含选择器:

$('body *:contains("specified text")')//return div element(s) that contains specified text

但是 contains 不适用于严格比较。为了严格比较,你需要使用过滤功能:

$('body *').filter(function(){
    return $(this).text() == "specified text";
});

【讨论】:

  • 如果文本位于spantable 中怎么办? OP 没有提到它必须在 div 中。
  • @Andy:OP 已经共享了 dom。没有跨度/表格元素。
  • “获取 DOM 标签的简单解决方案” - 也没有提到 div。这只是一个例子。
  • 查看共享标记。它有一个带有文本的 div。
  • &lt;div id='example'&gt;:注意“例子”这个词。
【解决方案2】:

你可以试一试:

function finder(query) {

    // get all elements
    var elements = document.getElementsByTagName('*');
    var out = [];
    for (var i = 0, l = elements.length; i < l; i++) {

        // if the element isn't a script and doesn't contain any child
        // elements and the text contains whatever you passed
        // in as a query, add it to the out-going array
        if (elements[i].tagName !== 'SCRIPT'
            && !elements[i].children.length
            && elements[i].textContent.indexOf(query) > -1) {
            out.push(elements[i]);
        }
    }
    return out;
}

// call finder with the parameter you want
var arr = finder('Hello');

// call the update function with the array
// passed back from finder
updateDom(arr);

function updateDom(arr) {

    // loop over the elements array from finder
    // and change the contents
    for (var i = 0, l = arr.length; i < l; i++) {
        arr[i].textContent = 'Hello Mikołaj Król';
    }
}

请注意,textContent 是 IE9+。

DEMO

【讨论】:

    最近更新 更多