Question

我在<span></span>代码中有一些文字，我想在加载页面时将该文本更改为其他内容。

所以我们说默认文本是'故事'（由某些CMS系统输出，我无法编辑它）。因此，当加载页面时，.js会检测到“故事”字样并将其替换为“查看此故事”。

这有可能吗？

干杯

更新：我在询问之前进行了搜索，但没有找到可行的方法。就像我说的那样，文本由CMS输出并且它给出了错误的标题，标题本身不能通过CMS编辑，因为它用于其他术语和标记是正确的，所以我在寻找js变通方法在页面加载时重命名它。

并且span没有ID，我也不能给它任何ID，因为我说它的工作原理是由CMS设计的。

<div class="views-row views-row-1 views-row-odd views-row-first active">
  <div class="views-field views-field-name">
    <span class="field-content">Story</span>
  </div>
</div>
<div class="views-row views-row-2 views-row-even">
  <div class="views-field views-field-name">
   <span class="field-content">Second Story</span>
  </div>
</div>

正如您所看到的，跨距没有ID，只重复了类。

Answer 1

根据OP请求更新

您可以替换跨度内的任何文本。您甚至可以使用正则表达式使其更灵活，但现在让我们离开：

原生Javascript

var lookupSpanAndReplace = function(textFrom, textTo) {
   var spans = document.getElementsByTagName('span');

   for (i=0; i<spans.length; i++) 
      if (spans[i].innerHTML.indexOf(textFrom) >= 0)
          spans[i].innerHTML = mySpan.innerHTML.replace(textFrom, textTo);
}

lookupSpanAndReplace("Story", "My New Text");

<强>的jQuery

var lookupSpanAndReplace = function(textFrom, textTo) {
    $('span:contains(' + textFrom + ')').each(function(index, element) { 
        $(element).text($(element).text().replace(textFrom, textTo));
    });
}

lookupSpanAndReplace("Story", "My New Text");

Answer 2

尝试

$('#spanID').text("View This Story");

或者如果您想要替换部分文字

$('#spanID').text(function () {
    return this.innerHTML.replace('Story', 'View This Story');
});

Answer 3

为您span提供一个ID，然后在该节点上运行text([your new text])：

<强> HTML

<span id="mySpan">Story</span>

<强>的jQuery

$('#mySpan').text("View This Story");

<强> JSFiddle with jQuery

或者你可以在没有jQuery的情况下做到这一点：

document.getElementById("mySpan").innerHTML = "View This Story";

<强> JSFiddle with plain 'ol Javascript

Answer 4

<script>
function changeSpan(){
   var spans = document.getElementsByTagName ("span");
   for (i = 0; i < spams.length; i++){
      spans[i].innerHTML = textThatYouWant ();
   }
}

</script>

<head onload="changeSpan()" >
   <tile> ... </title>
</head>
<body>
...
</body>

Answer 5

使用以下内容解决问题。

HTML code：

<html>
<head>
    <script>
        function replace_text_span()
        {
         for(i=0;i<document.getElementsByTagName('span').length;i++)
         {
          document.getElementsByTagName('span')[i].innerHTML=document.getElementsByTagName('span')[i].innerHTML.replace("Story","View This Story");
         }
        }
    </script>
    <style>
    </style>
</head>
<body onload="replace_text_span()">
    <div class="views-row views-row-1 views-row-odd views-row-first active">
      <div class="views-field views-field-name">
        <span class="field-content">Story</span>
      </div>
    </div>
    <div class="views-row views-row-2 views-row-even">
      <div class="views-field views-field-name">
       <span class="field-content">Second Story</span>
      </div>
    </div>
</body>
</html>

如何用javascript替换IDless <span>中的文本？</span>

5 个答案:

HTML code：