嗨,
我需要从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 Snoring
console.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);
,什么也没显示。这里似乎出了什么问题?
谢谢。
发布于 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>
https://stackoverflow.com/questions/50574803
复制相似问题