尝试将字符串分解为数组时，str.match不起作用
尝试将字符串分解为数组时，str.match不起作用
提问于 2018-05-29 08:30:20
嗨,
我需要从html元素的文本中创建一个变量，即
<div id="topcmm-123flashchat-sound-messages-contents" style="height:auto;"><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Gasp for supprise</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Giggle</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Say hello</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Come on</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kick somebody out</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kiss somebody</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Scream</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Yawn for sleepy</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Snoring</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div></div>我像这样声明这个变量
var elt = document.getElementById("topcmm-123flashchat-sound-messages-contents");
var lists = elt.textContent;我希望是这样的：
Gasp for surprise Giggle Say hello Come on Kick somebody out Kiss somebody Scream Yawn for sleepy Snoringconsole.log(lists);恰好显示了这一点，这意味着没有问题，对吧？
现在，我需要将所有这些内容转换为如下所示的数组：
var sounds = {
"gasp" : {
url : "gasp.mp3",
},
"giggle" : {
url : "giggle.mp3",
},
[...]
"scream" : {
url : "scream.mp3",
},
"snoring" : {
url : "snoring.mp3",
}
};所以我使用下面的代码：
var lists = elt.textContent;
const sounds = lists.toLowerCase().split(' ').reduce((accum, str) => {
const name = str.match(/^([^ ]+)/)[0];
accum[name] = { url: '/../flashsound/' + name + '.mp3' };
return accum;
}, {});由于某些原因，它不能工作。我得到一个错误，提示str.match为空。我查了一下console.log(sounds);，什么也没显示。这里似乎出了什么问题？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-29 08:39:17
问题是textContent没有返回您列出的字符串：
'Gasp for surprise Giggle Say hello Come on Kick somebody out Kiss somebody Scream Yawn for sleepy Snoring'它实际上返回一个带有一些额外填充的字符串：
' Gasp for supprise Giggle Say hello Come on Kick somebody out Kiss somebody Scream Yawn for sleepy Snoring ';
var elt = document.getElementById("topcmm-123flashchat-sound-messages-contents");
var lists = elt.textContent;
console.log(`"${lists}"`);<div id="topcmm-123flashchat-sound-messages-contents" style="height:auto;"><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Gasp for supprise</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Giggle</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Say hello</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Come on</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kick somebody out</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kiss somebody</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Scream</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Yawn for sleepy</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Snoring</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div></div>
因此，当reduce的第一次迭代运行时，它会尝试匹配第一个字符串：
' gasp for supprise'反对
/^([^ ]+)/在普通语言中:字符串的开头，后跟一个或多个非空格字符。但是字符串以空格开头，所以正则表达式失败。
要解决此问题，请先对textContent执行trim()操作：
var lists = elt.textContent.trim();但还有另一个问题:您当前的代码将URL转换为如下形式：
"url": "/../flashsound/gasp.mp3"但你说你想
url : "gasp.mp3",因此，在设置URL时，删除开头的/../flashsound/：
const elt = document.getElementById("topcmm-123flashchat-sound-messages-contents");
const lists = elt.textContent.trim();
const sounds = lists.toLowerCase().split(' ').reduce((accum, str) => {
const name = str.match(/^([^ ]+)/)[0];
accum[name] = {
url: name + '.mp3'
};
return accum;
}, {});
console.log(sounds);<div id="topcmm-123flashchat-sound-messages-contents" style="height:auto;"><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Gasp for supprise</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Giggle</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Say hello</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Come on</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kick somebody out</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Kiss somebody</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Scream</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Yawn for sleepy</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div><div class="topcmm-123flashchat-light-color-panel-singe-bar-block" onmouseover="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block-over'" onmouseout="this.className='topcmm-123flashchat-light-color-panel-singe-bar-block'"> <span class="topcmm-123flashchat-light-color-panel-sound-text">Snoring</span> <span class="topcmm-123flashchat-light-color-panel-sound-test-icon"></span> <span class="topcmm-123flashchat-light-color-panel-sound-sent-icon"></span> </div></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50574803
复制相关文章
相似问题