如何使用JavaScript制作超文本标记语言
如何使用JavaScript制作超文本标记语言
提问于 2018-07-01 00:45:17
我有一个函数，该函数将注释对象添加到HTML UI中。
注释对象的结构如下所示：
{
id,
text,
date,
links : [
{ link,
linkText
}
]
}我用来将note对象添加到无序列表中的函数()
function addNoteToListUI(note) {
$("#notesList").prepend("<li id='"+note.id+"'>" + note.text + "<div class='buttons'><button class='remove'>" + removeSVG + "</button></div></li>");
}这个函数的问题是:如果笔记有链接，我希望将这些链接作为超链接添加到UI中，例如：
let note = {
id : 1,
text : 'this is a simple note with a link and another link',
date : '2018/01/01',
links : [ {link : 'https://simple.com', text : 'link'},
{link : 'https://simple2.com', text : 'another link'} ]
}预期结果：
"<li id='"+note.id+"'> this is a simple note with a <a href ='https://simple.com'>link</a> and <a href ='https://simple2.com'>another link</a><div class='buttons'><button class='remove'>" + removeSVG + "</button></div></li>"这就是我们尝试过的方法，但它不起作用：
function addNoteToListUI(note) {
let text = "<li id='"+ note.id +"'>";
if(note.links !== undefined){
note.links.forEach(link => {
note.text.replace(RegExp(link.linkText, 'ig'), (match) => {
text += "<a href='"+link.link+"'>"+match+"</a>"
return match;
});
});
}
$("#notesList").prepend("note.text + "<div class='buttons'><button class='remove'>" + removeSVG + "</button></div></li>");
}这样做的问题很明显，它只添加了其他文本的链接
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-01 01:26:26
问题是，您在遍历链接时并没有实际更新任何标记。此外，使用这种设置，很难在不遇到歧义的情况下替换链接。例如，如果一个链接的一部分是另一个链接的实际文本，该怎么办？
"link"将替换示例中“链接”和“另一个链接”的文本，这似乎并不可取
我建议使用某种符号来表示“链接”(例如{{link}})。我还建议将逻辑分成更多的函数，这样更容易推理。
下面是一个示例：
let note = {
id: 1,
text: 'this is a simple note with a {{link}} and {{another link}}',
date: '2018/01/01',
// note, "links" has been refactored into an object for ease of lookup
links: {
link: {
link: 'https://simple.com',
text: 'link'
},
'another link': {
link: 'https://simple2.com',
text: 'another link'
}
}
}
const linkToHTML = link => `
<a href="${link.link}">${link.text}</a>
`
const resolvePlaceholders = (text, links) =>
text.replace(/{{([^}]*)}}/ig, (match, $1) =>
links[$1] ? linkToHTML(links[$1]) : match)
const noteToHTML = note => `
<li class="note" id="${note.id}">
${resolvePlaceholders(note.text, note.links)}
<div class="note-buttons">
<button class="remove">X</button>
</div>
</li>
`
const prependNote = note => $('#notesList').prepend(noteToHTML(note))
prependNote(note).note {
border: 1px solid grey;
margin-bottom: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="notesList"></ul>
Stack Overflow用户
发布于 2018-07-01 01:19:57
链接列表不明确，因为第一个link文本同时匹配link和another link。因此，这个答案取决于链接列表的顺序，它们将被找到，并且只匹配一次。否则，第一个link将在两个地方匹配，很难知道哪一个是预期的。
您可以将reduce()与链接数组一起使用，并将文本作为第二个参数传入。这将创建包含锚点的文本：
let t = note.links.reduce((a,c) => a.replace(RegExp(c.text), '<a href="' + c.link + '">' + c.text + '</a>'), note.text)现在，只需将其添加到列表元素中，您就会得到一个整洁的两行函数：
let note = {id : 1,text : 'this is a simple note with a link and another link',date : '2018/01/01',links : [ {link : 'https://simple.com', text : 'link'},{link : 'https://simple2.com', text : 'another link'} ] }
function makeNote(note){
let t = note.links.reduce((a,c) => a.replace(RegExp(c.text), '<a href="' + c.link + '">' + c.text + '</a>'), note.text)
return "<li id='"+ note.id +"'>" + t + "</li>";
}
$("#notesList").prepend(makeNote(note))<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="notesList"></ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51116748
复制相关文章
相似问题