Question

我的基本要求是使用HTML或任何浏览器辅助脚本将给定的文本锚转换为超链接。我们使用Windows10 / IE / Edge，仅供参考。

示例：给定文本

ABC
CDE
EFG

必需的输出：

www.xyz.com/test/ABC
www.xyz.com/test/CDE
www.xyz.com/test/EFG

我在这里找到了一个bash到超链接的查询。我的要求与此类似，但需要基于浏览器的脚本

How to create html links based on a text document of inputs

Answer 1

在<textarea>中放入文本，并使用js / jQuery读取其内容。

在内存中动态创建链接，然后在需要的地方使用（我只是附加到DOM）

var urlBase = 'https://example.com';

$(document).ready(function () {
  $('#input').change(function () {
    var lines = $(this).val().split("\n"); // Split textarea content by new line
    var links = $('#links'); // Links container
    links.html(''); // Empty container content
    
    $.each(lines, function (i, line) {
      links.append($('<a>', {href: urlBase + '/' + line, text: line})); // Append new link element
    })
  })
})

#links a {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="input"></textarea>

<div id="links"></div>

Answer 2

获取文本输入的值，在新行中将其分割，并创建带有所需href的a的字符串。我正在使用ul显示结果。

请注意创建一个字符串，然后将其添加到DOM的优点是，它只影响DOM一次，而不是在append选项的每个循环中都起作用。对于何时有一个很小的列表，但是如果要追加数百万行的情况来说，这是一件小事-如果使用.append（），则恒定的DOM操作可能会导致问题。

function convertText(){
 var links= document.getElementById('textInput').value;
 var linksArr = links.split('\n');
 
 var linkStr = '';
linksArr.forEach(function(link){
  linkStr += '<li><a href="www.xyz.com/test/'+link+'">'+link+'</a></li>';
})

document.getElementById('results').innerHTML = linkStr;

}

<textarea id="textInput"></textarea>
<hr/>
<button type="button" onclick="convertText()">Convert text to links</button>

<ul id="results"></ul>

HTML脚本将文本字符串转换为指定的超链接

2 个答案: