Question

我有一个令人满意的p标签。当提取来自p标签的内容并将其插入另一个标签时，原始的所有标记都将丢失。有没有办法保存标记？

请注意，如果插入符号位于段落中的第i个位置，则字符将从该位置开始提取直至结束。

function select() {
    var el = document.getElementById('p');
    el.focus();

    var sel = window.getSelection();
    var selRange = sel.getRangeAt(0);

    var range = selRange.cloneRange();
    range.selectNodeContents(el);
    range.setStart(selRange.endContainer, selRange.endOffset);

    document.getElementById('other').innerHTML = (range.extractContents().textContent);
    // return range.extractContents().textContent;
}

p {
	background-color: #eee;
}

.red {
  color: red;
}

<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p>
<p id="other"></p>
<button onclick="select()">SELECT</button>

Answer 1

range.extractContents()返回DocumentFragment。

DocumentFragment没有innerHTML属性。 innerHTML来自Element界面，而textContent是Node界面的一部分。 DocumentFragment继承自Node，但不是Element。

这意味着你可以只追加整个片段，因为它是Node：

＆＃13;

function select() {
  var el = document.getElementById('p');
  el.focus();

  var sel = window.getSelection();
  var selRange = sel.getRangeAt(0);

  var range = selRange.cloneRange();
  range.selectNodeContents(el);
  range.setStart(selRange.endContainer, selRange.endOffset);

  //document.getElementById('other').innerHTML = (range.extractContents().textContent);
  var frag = range.extractContents();
  var i;
  var node;
  var other = document.getElementById('other');
  other.innerHTML = '';
  other.appendChild(frag);
}

＆＃13;

p {
	background-color: #eee;
}

.red {
  color: red;
}

＆＃13;

<p id="p" contenteditable="true">This is <i>a</i> <span class="red">paragraph</span> <b>with</b> lots of markup.</p>
<p id="other"></p>
<button onclick="select()">SELECT</button>

＆＃13;

Answer 2

供进一步参考，如果有人真的需要提取的片段的innerHTML。

该片段具有子节点，而这些子节点具有outerHTML属性，因此您只需从所有childNodes中获取const fragment = range.extractContents(); const htmlContent = [].map.call(fragment.childNodes, x => x.outerHTML).join('')

map.call

需要childNodes部分，因为尽管该片段具有childNodes属性，但是map没有{{1}}方法。

Answer 3

你的意思不是这样吗？

public class StethoHttpUrlFetcher implements DataFetcher<InputStream> {
    private final StethoURLConnectionManager stethoManager;
    public StethoHttpUrlFetcher(GlideUrl glideUrl) {
        ...
        this.stethoManager = new StethoURLConnectionManager("Glide");
    }

    private InputStream loadDataWithRedirects(...) {
        ...
        //urlConnection.setRequestProperty("Accept-Encoding", "gzip"); // don't request, it's wasteful for images
        ...
        stethoManager.preConnect(urlConnection, null);
        try {
            // Connect explicitly to avoid errors in decoders if connection fails.
            urlConnection.connect();
            stethoManager.postConnect();
        } catch (IOException ex) {
            stethoManager.httpExchangeFailed(ex);
            throw ex;
        }
        ...
    }

    private InputStream getStreamForSuccessfulRequest(HttpURLConnection urlConnection) throws IOException {
        try {
            InputStream responseStream = stethoManager.interpretResponseStream(urlConnection.getInputStream());
            if (TextUtils.isEmpty(urlConnection.getContentEncoding())) {
                ...
                stream = ContentLengthInputStream.obtain(responseStream, contentLength);
            } else {
                ...
                stream = responseStream;
            }
            return stream;
        } catch (IOException ex) {
            stethoManager.httpExchangeFailed(ex);
            throw ex;
        }
    }

    @Override public void cleanup() {
        ...
        if (isCancelled) { // otherwise it stays pending indefinitely because the stream is not read
            stethoManager.httpExchangeFailed(new IOException("Cancelled"));
        }
    }
}

你的javascript就这么简单：

document.getElementById('other').innerHTML = el.innerHTML;

修改

嘿，你拒绝投票给我答案，但你能解释一下你想要实现的目标吗？我在上面写的代码你可以看到在这个jsfiddle中工作：https://jsfiddle.net/936zuzky/1/

您想要保存原始标记 - 它已保存，您希望实现什么目标？

获取＃document-fragment的innerHTML而不是textContent

3 个答案: