我有一个函数,该函数将注释对象添加到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>");
}
这样做的问题很明显,它只添加了其他文本的链接
发布于 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>
发布于 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>
https://stackoverflow.com/questions/51116748
复制相似问题