DOM / Javascript:标记后获取文本

时间:2012-02-20 10:24:32

标签: javascript dom

如何获取html文档中标记之后的“那里”文本:

<p><a>hello</a>there</p>

我看到有一种方法可以使用xpath:

Get text from next tag

但是我没有使用xpath,我希望不必为此开始。我意识到我可以获得p标签内的所有文本,但我想获得“那里”文本,以及知道它与p和标签的关系。它似乎不是任何人的孩子或兄弟姐妹。 (你可以假设我可以获得任何其他元素/节点,因此它可以相对于那些。)每个DOM教程似乎都忽略了文本可以在标记之外发生的事实。

感谢。

6 个答案:

答案 0 :(得分:7)

类似于this

var p = document.getElementsByTagName("p")[0];
alert(p.childNodes[1].textContent)

答案 1 :(得分:5)

使用此.. http://jsfiddle.net/2Dxy4/

这是您的HTML -

<p id="there">
   <a>hello</a>
   there
</p>​

在你的JS中

alert(document.getElementById("there").lastChild.textContent)​

alert(document.getElementById("there").childNodes[1].textContent)​

答案 2 :(得分:0)

您可以使用lastChild和textContent来获取它:http://jsfiddle.net/M3vjR/

答案 3 :(得分:0)

如果您使用jQuery,那么有一种偷偷摸摸的方式来获取此

x = $("<p><a>hello</a>there</p>")
x.contents()[1]

答案 4 :(得分:0)

您可以找到父标签的子标签:

    <!DOCTYPE html>

    <html lang="en">

    <head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Project Method</title>
<!-- Google Captcha -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/static/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/static/css/style.css" rel="stylesheet">
<!-- Bootstrap Select -->
<link href="/static/css/bootstrap-select.min.css" rel="stylesheet">
    </head>
    <body>

    <header>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
    <div class="container">

        <!-- Brand -->
        <a class="navbar-brand" href="https://mdbootstrap.com/docs/jquery/" target="_blank">
            <strong>MDB</strong>
        </a>

        <!-- Collapse -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Links -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <!-- Left -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://mdbootstrap.com/docs/jquery/" target="_blank">About MDB</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank">Free download</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://mdbootstrap.com/education/bootstrap/" target="_blank">Free tutorials</a>
                </li>
            </ul>

            <!-- Right -->
            <ul class="navbar-nav nav-flex-icons">
                <li class="nav-item">
                    <a href="https://www.facebook.com/mdbootstrap" class="nav-link" target="_blank">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="https://twitter.com/MDBootstrap" class="nav-link" target="_blank">
                        <i class="fab fa-twitter"></i>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light rounded"
                       target="_blank">
                        <i class="fab fa-github mr-2"></i>MDB GitHub
                    </a>
                </li>
            </ul>

        </div>

    </div>
</nav>
<!-- Navbar -->    </header>

    <div class="wrapper">

        <!--Main layout-->
        <main class="page-content mt-5 pt-5">
            <div class="container">


    <div class="container-fluid full-page-container">
        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-lg-6 col-sm-8 animated fadeIn">

                <div class="card">

                    <h5 class="card-header pink lighten-3 white-text text-center py-4">
                        <strong>Добавление участников</strong>
                    </h5>

                    <div class="card-body px-lg-5 pt-0">

                        <form action="/projects/project/12/team/create" method="post"
                              style="color: #757575;">

                            <!-- CSRF Token -->
                            <input type="hidden" name="_csrf" value="90930bb8-44b3-4f26-8fe9-a62c46264360"/>

                            <div class="form-group">
                                <label for="teamName">Название команды</label>
                                <input type="text" id="teamName" name="teamName" value=""
                                       class="form-control " required>
                            </div>

                            <div class="form-group">
                                <div id="select-form-control">
                                    <select name="teamUsers"
                                            class="selectpicker form-control "
                                            data-actions-box="true"
                                            data-dropup-auto="false"
                                            data-live-search="true"
                                            data-selected-text-format="count"
                                            data-size="10"
                                            data-style="btn-info text-white"
                                            data-width="97%"
                                            multiple
                                            required
                                    >
                                            <option value="3">student student</option>
                                            <option value="4">student student</option>
                                            <option value="5">student student</option>
                                    </select>
                                </div>
                            </div>

                            <div class="modal-footer d-flex justify-content-center">

                                <button type="button"
                                        onClick='location.href="/projects/project/12"'
                                        class="btn btn-outline-pink waves-effect">
                                    Отмена
                                </button>

                                <button type="submit" class="btn btn-unique waves-effect">
                                    Сохранить
                                </button>

                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


            </div>
        </main>
        <!--Main layout-->

<!--Footer-->
<footer class="page-footer text-center font-small mt-4 wow fadeIn">

    <!--Call to action-->
    <div class="pt-4">
        <a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank" role="button">Download MDB
            <i class="fas fa-download ml-2"></i>
        </a>
        <a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start free tutorial
            <i class="fas fa-graduation-cap ml-2"></i>
        </a>
    </div>
    <!--/.Call to action-->

    <hr class="my-4">

    <!-- Social icons -->
    <div class="pb-4">
        <a href="https://www.facebook.com/mdbootstrap" target="_blank">
            <i class="fab fa-facebook-f mr-3"></i>
        </a>

        <a href="https://twitter.com/MDBootstrap" target="_blank">
            <i class="fab fa-twitter mr-3"></i>
        </a>

        <a href="https://www.youtube.com/watch?v=7MUISDJ5ZZ4" target="_blank">
            <i class="fab fa-youtube mr-3"></i>
        </a>

        <a href="https://plus.google.com/u/0/b/107863090883699620484" target="_blank">
            <i class="fab fa-google-plus-g mr-3"></i>
        </a>

        <a href="https://dribbble.com/mdbootstrap" target="_blank">
            <i class="fab fa-dribbble mr-3"></i>
        </a>

        <a href="https://pinterest.com/mdbootstrap" target="_blank">
            <i class="fab fa-pinterest mr-3"></i>
        </a>

        <a href="https://github.com/mdbootstrap/bootstrap-material-design" target="_blank">
            <i class="fab fa-github mr-3"></i>
        </a>

        <a href="http://codepen.io/mdbootstrap/" target="_blank">
            <i class="fab fa-codepen mr-3"></i>
        </a>
    </div>
    <!-- Social icons -->

    <!--Copyright-->
    <div class="footer-copyright py-3">
        © 2018 Copyright:
        <a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>
    </div>
    <!--/.Copyright-->

</footer>
<!--/.Footer-->
    </div>

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="/static/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/static/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="/static/js/mdb.min.js"></script>
<!-- jQuery Multi -->
<script type="text/javascript" src="/static/js/multi.js"></script>
<!-- Bootstrap Select -->
<script type="text/javascript" src="/static/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="/static/js/defaults-ru_RU.min.js"></script>
<!-- jQuery Validation -->
<script type="text/javascript" src="/static/js/jquery.validate.js.js"></script>


<!-- Initializations -->
<script type="text/javascript">
    // Animations initialization
    new WOW().init();

    $(function () {
        window.setTimeout(function () {
            $('#my-alert').alert('close');
        }, 5000);
    });

    $("form").validate();

</script>
    </body>
    </html>

最后,您可以在@*@formatter:off*@节点之后的var pTag = ... var childNodes = pTag.childNodes; 节点中找到文本。

答案 5 :(得分:-1)

你必须首先得到一个属性innerhtml,然后使用substring来获取total innerhtml,你可以拥有你的部分..

$(document).ready(function () {
var getA=$("p >a").text();
var getA=getA.length;
var takeTotal=$("p").text();
var result=takeTotal.substring(get);
alert(result);
});