(5)获取<div id="content">内容</div>标签里的文本内容的方法有哪些
时间: 2023-03-31 17:00:43 浏览: 72
您可以使用以下方法获取<div id="content">标签里的文本内容:
1. 使用JavaScript的document.getElementById("content").innerHTML方法获取标签内的HTML内容,再使用正则表达式或字符串处理方法提取文本内容。
2. 使用jQuery的$("#content").text()方法获取标签内的纯文本内容。
3. 使用Python的BeautifulSoup库或正则表达式等方法解析HTML文档,再提取<div id="content">标签内的文本内容。
相关问题
<h1>通讯录</h1> <button class="add-btn">添加联系人</button> <table> <thead> <tr> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <!-- 数据渲染 --> </tbody> </table> <!-- 弹出层,用于添加或编辑联系人 --> <div id="modal" class="modal" style="display: none;"> <div class="modal-content"> <span class="close">×</span> <form> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">电话</label> <input type="text" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="text" id="email" name="email" required> </div> <button id="save-btn">保存</button> <button id="cancel-btn">取消</button> </form> </div> </div>给这个页面添加一个搜索信息的功能使用正则查找
好的,可以通过以下代码实现一个搜索联系人的功能:
```html
<!-- 添加搜索框 -->
<div>
<label for="search-input">搜索联系人:</label>
<input type="text" id="search-input">
</div>
<script>
const searchInput = document.getElementById('search-input');
const tableBody = document.querySelector('tbody');
// 监听搜索框输入
searchInput.addEventListener('input', () => {
const searchText = searchInput.value.trim().toLowerCase();
const rows = tableBody.querySelectorAll('tr');
// 遍历每一行联系人信息,使用正则表达式匹配搜索文本
rows.forEach(row => {
const name = row.querySelector('td:nth-child(1)').textContent.toLowerCase();
const phone = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
const email = row.querySelector('td:nth-child(3)').textContent.toLowerCase();
if (name.match(searchText) || phone.match(searchText) || email.match(searchText)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
});
</script>
```
在页面中添加一个输入框和一个表格,然后使用 JavaScript 监听输入框的输入事件,获取搜索文本的值。接着遍历表格中每一行联系人信息,将姓名、电话、邮箱三个字段的文本内容转换为小写字母,并使用 `match` 方法与搜索文本进行匹配。如果匹配成功,则显示该行联系人信息,否则隐藏该行信息。这样就实现了一个基本的联系人搜索功能。
<!DOCTYPE html> <html> <head> <title>Math Board</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <meta charset="utf-8" /> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> --> <script type="text/javascript" src="./src/code.js" defer></script> <!-- MathJax --> <script id="MathJax-script" type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script> </head> <body> <div id="env"> <canvas id="painting-area"></canvas> </div> <div id="bar"> <div id="paint"> <button onclick="changeTool(0)">文本框</button> <button onclick="changeTool(1)">画笔</button> <button onclick="changeTool(2)">橡皮擦</button> </div> <div id="text"> <form name="form" onsubmit="return false;"> <textarea id="input" autofocus></textarea> <button id="button" onclick="createBox();">▷</button> </form> </div> </div> </body> </html>
这是一个HTML页面的代码,它创建了一个名为"Math Board"的数学白板。这个页面使用了一个样式表文件“style.css”,并引入了一个JavaScript文件“code.js”来处理交互和绘图功能。此外,还引入了MathJax库来支持数学公式的渲染。
页面中有两个主要的区域:“env”和“bar”。在“env”区域中,有一个用于绘图的画布元素“painting-area”。在“bar”区域中,有一个工具栏和一个文本框,用于选择绘图工具和输入文本内容。
你可以根据需要修改HTML、CSS和JavaScript代码来自定义和扩展这个数学白板的功能。