JavaScript/HTML：不使用innerHTML处理正文文本

gcuhipw9 于 12个月前发布在 Java

关注(0)|答案(2)|浏览(133)

我有一些HTML表示一个书目，其中有几百个段落，每个段落看起来像：

<p>Some text, doi:<a href="https://doi.org/some_doi">some_doi</a>.</p>

字符串
目前，我为每个新的<p>条目手动输入DOI的两个示例，但这不是很有效，我想用一个脚本来为每个条目生成<a href>。我可以使用innerHTML来完成，但这需要为每个条目生成id，并在head中生成相应的脚本，这效率更低。
我尝试用一个head脚本来替换这个工作流：

<script type="text/javascript">
    function substituteDOI(myDOI) {
      return `doi:<a href="${myDOI}">${myDOI}</a>`;
    }
  </script>

型
并在body中调用它：

<p>Some text, <script type="text/javascript">substituteDOI('test');</script>.</p>

型
但是该脚本根本没有返回任何<p>元素，即使只是使用return 'test'或一些类似的伪文本。浏览器控制台同样没有返回任何错误来调试，很明显源代码本身没有被更新。我想要的是，功能上，一种内联的方式来替换给定的字符串（并对其进行一些简单的连接）。
这可能吗？我意识到使用模板引擎之类的东西会更合适，但我不想为此而重新制作整个网站页面。

JavaScript

来源：https://stackoverflow.com/questions/77477625/javascript-html-manipulate-body-text-without-innerhtml

2条答案

按热度按时间

2nbm6dog1#

使用document.write()在<script>之后插入函数的值

<p>Some text, <script type="text/javascript">document.write(substituteDOI('test'));</script>.</p>

字符串

赞(0）回复(0）举报 12个月前

aurhwmvo2#

联系我们
我将尝试使用querySelectorAll，但首先想到的问题是每个<p>元素都有不同的a href URL。
然后，您可以使用正则表达式从每个段落中提取DOI。正则表达式/doi:(\S+)/将匹配字符串**doi：**后跟一个或多个非空格字符，这应该捕获DOI。
范例方法;

<script type="text/javascript">
 function substituteDOI(myDOI) {
  return `doi:<a href="${myDOI}">${myDOI}</a>`;
 }

 var paragraphs = document.querySelectorAll("p");
 paragraphs.forEach(function(paragraph) {
  var text = paragraph.innerHTML;
  var doiMatch = text.match(/doi:(\S+)/);
  if (doiMatch) {
    var doi = doiMatch[1]; // The DOI is the first capturing group
    var newText = text.replace("doi:" + doi, substituteDOI(doi));
    paragraph.innerHTML = newText;
  }
 });
</script>

字符串
这种方法允许你用一个脚本替换html中的所有DOI，而不必为每个段落或头部的相应脚本生成一个id。它还避免了重新制作整个网站页面的需要。

赞(0）回复(0）举报 12个月前

我来回答

JavaScript/HTML：不使用innerHTML处理正文文本

2条答案

相关问题

热门标签

最新问答