Question

您好，

我需要从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);并没有显示任何内容。这里似乎有什么问题？

谢谢。

Answer 1

问题是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'

针对

/^([^ ]+)/

在普通语言中：字符串的开头，后跟一个或多个非空格字符。但字符串以空格开始，因此正则表达式失败。

要解决此问题，trim()首先textContent：

var lists = elt.textContent.trim();

但还有另一个问题：您当前的代码将URL转换为如下所示：

"url": "/../flashsound/gasp.mp3"

但你说你想要

url : "gasp.mp3",

因此，请在设置网址时删除开头/../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>

尝试将字符串分解为数组时，str.match无法正常工作

1 个答案: